<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="年级:" prop="region">
        <el-select v-model="ruleForm.region" placeholder="年级">
          <el-option label="一年级" value="一年级"></el-option>
          <el-option label="二年级" value="二年级"></el-option>
          <el-option label="三年级" value="三年级"></el-option>
          <el-option label="四年级" value="四年级"></el-option>
          <el-option label="五年级" value="五年级"></el-option>
          <el-option label="六年级" value="六年级"></el-option>
          <el-option label="初一" value="初一"></el-option>
          <el-option label="初二" value="初二"></el-option>
          <el-option label="初三" value="初三"></el-option>
          <el-option label="高一" value="高一"></el-option>
          <el-option label="高二" value="高二"></el-option>
          <el-option label="高三" value="高三"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学科:" prop="regionn">
        <el-select v-model="ruleForm.regionn" placeholder="学科">
          <el-option label="数学" value="数学"></el-option>
          <el-option label="语文" value="语文"></el-option>
          <el-option label="英语" value="英语"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="试卷类型:" prop="regionnn">
        <el-select
          v-model="ruleForm.regionnn"
          placeholder="请选择"
          @change="testtime(ruleForm.regionnn)"
        >
          <el-option label="固定试卷" value="固定试卷"></el-option>
          <el-option label="任务试卷" value="任务试卷"></el-option>
          <el-option label="视频试卷" value="视频试卷"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="试卷名称:" prop="name">
        <el-input v-model="ruleForm.name" class="inp"></el-input>
        <el-button type="success" size="small" @click="dialogFormVisible = true"
          >添加题目</el-button
        >
      </el-form-item>

      <el-card class="box-card">
        <el-table :data="dialogtimu" style="width: 100%" :show-header="booll">
          <el-table-column fixed prop="questionId" width="120"
            >{{ "题目" }}
          </el-table-column>
          <el-table-column prop="qcName"> </el-table-column>
          <el-table-column prop="qcA" width="120"></el-table-column>
          <el-table-column prop="qcB" width="120"></el-table-column>
          <el-table-column prop="qcC" width="120"></el-table-column>
          <el-table-column prop="qcD" width="120"></el-table-column>
          <el-table-column fixed="right" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, dialogtimu)"
                size="small"
                type="danger"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 计时器 -->
      <el-form-item label="时长(分钟):" prop="name">
        <el-input-number
          v-model="num"
          @change="handleChange"
          :min="1"
          :max="10000"
          label="分钟"
        ></el-input-number>
      </el-form-item>
    </el-form>

    <!-- 底部btn -->
    <div class="btn">
      <el-button type="primary" size="small" @click="submitCreate()"
        >提交</el-button
      >
      <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
    </div>
    <!-- //弹出层 -->
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 弹出层-ID输入 -->
        <el-form-item label="ID:">
          <el-input v-model="formInline.id" placeholder=""></el-input>
        </el-form-item>
        <!-- 弹出层-题型选择-->
        <el-form-item label="题型">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option label="单选题" value="单选题"></el-option>
            <el-option label="多选题" value="多选题"></el-option>
            <el-option label="判断题" value="判断题"></el-option>
            <el-option label="填空题" value="填空题"></el-option>
            <el-option label="简答题" value="简答题"></el-option>
          </el-select>
        </el-form-item>
        <!-- 弹出层-查询btn -->
        <el-form-item>
          <el-button type="primary" @click="dialogquery()">查询</el-button>
        </el-form-item>
        <!-- 弹出层-表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="questionId" label="ID" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
          </el-table-column>
          <el-table-column
            prop="questionName"
            label="题干"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <!-- 弹出层-分页条 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="page_bottom"
          >
          </el-pagination>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            dialogdata();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  dialogdatalink,
  dialogquerylink,
  dialogrenderlink,
  createrenderlink,
  createsubmitlink,
} from "../../../apis/shimengtong/Index.js";
export default {
  data() {
    return {
      dialogtimu: [],
      //弹出层//  1.分页条
      //1.弹出层-分页条
      page: 1,
      limit: 5,
      total: 0,
      //弹出层-id、题型
      formInline: {
        id: "",
        type: "",
      },
      //弹出层-表格数据
      tableData: [],
      multipleSelection: [],

      booll: false,
      //新增题目位置数据
      tableDataa: [],
      // { date: 1, name: 2 }
      //计时器
      num: 1,
      //弹出层数据
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      email: "",
      value1: [new Date(2023, 9, 10, 8, 40), new Date(2023, 9, 10, 9, 40)],
      value2: [new Date(2023, 9, 10, 8, 40), new Date(2023, 9, 10, 9, 40)],
      // num: 1,
      bool: false,
      //新增数据
      ananswer: "",
      time: +new Date(),
      ruleForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
        name: "",
        region: "",
        regionn: "",
        regionnn: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
          {
            min: 3,
            max: 5000,
            message: "长度在 3 到 5000 个字符",
            trigger: "blur",
          },
        ],
        region: [{ required: true, message: "请选择", trigger: "change" }],
        regionn: [{ required: true, message: "请选择", trigger: "change" }],
        regionnn: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  mounted() {
    if (this.$route.query.todata) {
      this.show();
    }
    this.showdialog();
  },
  methods: {
    //2.进入页面就渲染dialog数据----
    showdialog() {
      dialogdatalink(this.page, this.limit).then((ok) => {
        this.tableData = ok.data.data.records;
        this.total = ok.data.data.total;
      });
    },
    //3.弹出层-题型  dialog查询接口-----
    dialogquery() {
      dialogquerylink(
        this.page,
        this.limit,
        this.formInline.id,
        this.formInline.type
      ).then((ok) => {
        this.tableData = [...ok.data.data.records];
        this.total = ok.data.data.total;
        this.page = ok.data.data.pages;
        this.limit = ok.data.data.size;
      });
    },
    //1.弹出层-分页条----------ok
    handleSizeChange(val) {
      this.limit = val;
      this.dialogquery();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dialogquery();
    },
    //4.弹出层数据带出渲染到试卷创编
    dialogdata() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        dialogrenderlink(this.multipleSelection[i].questionId).then((ok) => {
          this.tableDataa.unshift(...ok.data.data);
          this.dialogtimu.push({
            qcA: this.tableDataa[0].danXuanList[0].a,
            qcB: this.tableDataa[0].danXuanList[0].b,
            qcC: this.tableDataa[0].danXuanList[0].c,
            qcD: this.tableDataa[0].danXuanList[0].d,
            qcName: this.tableDataa[0].questionName,
            // qcId: this.tableDataa[0].questionId,
          });
          // console.log(this.tableDataa[0].questionName,"mmmmmmmmmmmmmmm");
        });
      }
      // console.log(this.dialogtimu,888888888888888);
    },
    //5.试卷创编页面整体提交
    submitCreate() {
      createsubmitlink(
        this.ruleForm.region,
        this.ruleForm.regionn,
        this.ruleForm.regionnn,
        this.ruleForm.name,
        this.dialogtimu,
        this.num,
        this.time,
      ).then((ok) => {
        console.log(ok,7777777777777777777);
      });
      this.$message({
        message: "新增试卷成功！",
        type: "success",
      });
    },

    //6.接收list页面参数进行渲染

    //进入页面渲染
    show() {
      // console.log(this.$route.query.todata);
      createrenderlink(
        this.$route.query.todata
      ).then((ok) => {
        (this.ruleForm.region = ok.data.data.testClass),
          (this.ruleForm.regionn = ok.data.data.testSubjectName),
          (this.ruleForm.regionnn = ok.data.data.testType),
          (this.ruleForm.name = ok.data.data.testName);
          (this.dialogtimu=ok.data.data.questionContentList)
      });
    },
    //新增题目中的删除按钮
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },

    //计时器
    handleChange(value) {
      this.num = value;
    },

    //弹出层-表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //testtime 时段考试下出现 时间选择
    testtime(val) {
      if (val == "时段试卷") {
        this.bool = true;
      } else {
        this.bool = false;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //删除按钮
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item);
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1);
      }
    },

    //新增按钮
    addDomain() {
      this.ruleForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>

<style scoped>
.btn {
  margin-left: 25px;
}
/* 注意注意注意！！！！！！！ 下面的>>>是穿透语法，不是合并冲突，别给我删了！！！！！！ */
.page_bottom {
  margin-top: 20px;
}
.text {
  font-size: 14px;
}

.box-card {
  width: 1000px;
  margin-left: 100px;
  margin-bottom: 10px;
}
.inp {
  width: 900px;
  margin-right: 10px;
}
.sss {
  background-color: red;
  color: red;
}
</style>